var htmlCodes = [
    '<div>',
    '<div id="rrapp" v-cloak>',
    '    <div v-show="showList">',
    '        <div class="grid-btn">',
    '            <form class="form-inline" role="form">',
    '                &nbsp;&nbsp;',
    '                <a @click="reset"><i class="fa fa-refresh"></i></a>',
    '                <div class="form-group">',
    '                    <el-input placeholder="请输入内容" size="small" v-model="q.templateName" clearable placeholder="运费模板名"></el-input>',
    '                </div>',
    '                &nbsp;&nbsp;',
    '                    <el-button type="primary" size="small" @click="add" plain>新增</el-button>',
    '                    <el-button type="primary" icon="el-icon-search" size="small" @click="query" plain>查询</el-button>',
    // '                <a class="btn btn-primary "  @click="query"><i class="fa fa-search"></i>&nbsp;查询</a>',
    '            </form>',
    '        </div>',
    '        <el-table :data="freightTemplateList" size="mini" highlight-current-row="true" style="width: 100%">',
    '            <el-table-column   width="50">',
    '                <template slot-scope="scope">',
    '                    <el-radio @change="returnTemplateId" v-model="freightPropId" :label="scope.row.templateId"></el-radio>',
    '                </template>',
    '            </el-table-column>',
    '            <el-table-column prop="templateName" label="运费模板名" ></el-table-column>',
    '            <el-table-column  label="模板类型" width="180">',
    '                <template slot-scope="scope">',
    '                    <span v-if="scope.row.templateType == \'shop\'">店铺</span>',
    '                    <span v-if="scope.row.templateType == \'sku\'">单品</span>',
    '                </template>',
    '            </el-table-column>',
    '            <el-table-column  label="是否免邮">',
    '                <template slot-scope="scope">',
    '                    <span v-if="scope.row.freeShipping == 1">包邮</span>',
    '                    <span v-if="scope.row.freeShipping == 0">不包邮</span>',
    '                </template>',
    '            </el-table-column>',
    '            <el-table-column prop="valuationWay" label="计价规格" >',
    '                <template slot-scope="scope">',
    '                    <span v-if="scope.row.valuationWay == \'weight\'">按重量计价</span>',
    '                    <span v-if="scope.row.valuationWay == \'unit\'">按件数计价</span>',
    '                </template>',
    '            </el-table-column>',
    '            <el-table-column prop="firstUnit" label="首重(件)" ></el-table-column>',
    '            <el-table-column prop="firstPrice" label="首重(件)费用"></el-table-column>',
    '            <el-table-column prop="continueUnit" label="续重(续件)" ></el-table-column>',
    '            <el-table-column prop="continuePrice" label="续重(续件)费用" ></el-table-column>',
    '            <el-table-column prop="sellerId" label="卖家id"></el-table-column>',
    '            <el-table-column prop="defTemplate" label="是否默认模板" >',
    '                <template slot-scope="scope">',
    '                    <span v-if="scope.row.defTemplate == \'0\'">不是默认模板</span>',
    '                    <span v-if="scope.row.defTemplate == \'1\'">默认模板</span>',
    '                </template>',
    '            </el-table-column>',
    '            <el-table-column prop="providerType" label="type"></el-table-column>',
    '            <el-table-column  label="操作" width="250">',
    '                <template slot-scope="scope">',
    '                    <el-button type="primary" size="small" @click="del(scope.row.templateId)" plain>删除</el-button>',
    '                    <el-button type="primary" size="small" @click="update(scope.row.templateId)" plain>编辑</el-button>',
    '                </template>',
    '            </el-table-column>',
    '        </el-table>',
    '        <div class="block text-right">',
    '            <el-pagination',
    '                    @size-change="handleSizeChange"',
    '                    @current-change="handleCurrentChange"',
    '                    :current-page="1"',
    '                    :page-sizes="[page.size, 2*page.size, 4*page.size]"',
    '                    :page-size="page.pageSize"',
    '                    :total="page.total">',
    '            </el-pagination>',
    '        </div>',
    '    </div>',
    '    <div v-show="!showList">',
    '        <div class="panel-heading">{{title}}</div>',
    '        <form class="form-horizontal" style="width: 100%">',
    '            <div class="form-group " hidden>',
    '                <div class="col-sm-2 control-label">模板ID:</div>',
    '                <div class="col-sm-1">',
    '                    <input type="text" class="form-control" v-model="freightTemplate.templateId" readonly="readonly" placeholder="模板id"/>',
    '                </div>',
    '            </div>',
    '            <div class="form-group">',
    '                <div class="col-sm-2 control-label">模板名称:</div>',
    '                <div class="col-sm-2">',
    '                    <input type="text" class="form-control" v-model="freightTemplate.templateName" placeholder="模板名称"/>',
    '                </div>',
    '            </div>',
    '            <!--<div class="form-group">-->',
    '                <!--<div class="col-sm-2 control-label">模板类型:</div>-->',
    '                <!--<div class="col-sm-2">-->',
    '                    <input  class="form-control" v-model="freightTemplate.providerType" type="hidden" placeholder="模板类型"/>',
    '                <!--</div>-->',
    '            <!--</div>-->',
    '            <div class="form-group">',
    '                <div class="col-sm-2 control-label">是否包邮:</div>',
    '                <div class="col-sm-1">',
    '                    <select class="form-control" v-model="freightTemplate.freeShipping">',
    '                        <option class="form-control"  value="0">不包邮</option>',
    '                        <option class="form-control" value="1">包邮</option>',
    '                    </select>',
    '                </div>',
    '            </div>',
    '            <div class="form-group">',
    '                <div class="col-sm-2 control-label">计价规则:</div>',
    '                <div class="col-sm-1">',
    '                    <select class="form-control" v-model="freightTemplate.valuationWay">',
    '                        <option class="form-control" value="unit">按件计价</option>',
    '                        <option class="form-control" value="weight">按重量计价</option>',
    '                    </select>',
    '                </div>',
    '            </div>',
    '            <div class="form-group">',
    '                <div class="col-sm-2 control-label">运送方式:</div>',
    '                <div class="col-sm-10">',
    '                    <table id="trFreight" class="controls table-striped table-bordered table-condensed" style="width: 100%;">',
    '                        <tr >',
    '                            <th colspan="6" >',
    '                                <div class="form-inline">',
    '                                    <div class="form-group">',
    '                                        <label >默认运费:</label>',
    '                                        <input  type="text" class="form-control" v-model="freightTemplate.firstUnit" >',
    '                                    </div>',
    '                                    <div class="form-group">',
    '                                        <label v-if="freightTemplate.valuationWay === \'weight\'">Kg内,</label>',
    '                                        <label v-else>件内,</label>',
    '                                        <input  type="text" class="form-control" v-model="freightTemplate.firstPrice"/>',
    '                                    </div>',
    '                                    <div class="form-group">',
    '                                        <label >元,每增加</label>',
    '                                        <input  type="text" class="form-control" v-model="freightTemplate.continueUnit"/>',
    '                                    </div>',
    '                                    <div class="form-group">',
    '                                        <label v-if="freightTemplate.valuationWay === \'weight\'">Kg,增加运费</label>',
    '                                        <label v-else>Kg,增加运费</label>',
    '                                        <input  type="text" class="form-control" v-model="freightTemplate.continuePrice"/>',
    '                                        元',
    '                                    </div>',
    '                                </div>',
    '                            </th>',
    '                        </tr>',
    '                        <tr>',
    '                            <th></th>',
    '                            <th>运送到</th>',
    '                            <th><div v-if="freightTemplate.valuationWay === \'weight\'">首重(kg)</div><div v-else>首件</div></th>',
    '                            <th><div v-if="freightTemplate.valuationWay === \'weight\'">首重费用</div><div v-else>首件费用</div></th>',
    '                            <th><div v-if="freightTemplate.valuationWay === \'weight\'">续重(kg)</div><div v-else>续件</div></th>',
    '                            <th><div v-if="freightTemplate.valuationWay === \'weight\'">续重费用</div><div v-else>续件费用</div></th>',
    '                        </tr>',
    '                        <tbody v-for="(item,index) in freightAreaList">',
    '                            <tr>',
    '                                <td>',
    '                                    <a class=\'addBtn\'  @click=\'showCity(index)\'>编辑</a>',
    '                                    <a class=\'addBtn\'  @click=\'delCity(index)\'>删除</a>',
    '                                </td>',
    '                                <td>',
    '                                    <input class=\'form-control \' readonly="readonly" v-model=freightAreaList[index].areaNames >',
    '                                    <input class=\'form-control \' type="hidden" v-model=freightAreaList[index].areaIds >',
    '                                </td>',
    '                                <td><input class=\'form-control\' v-model=freightAreaList[index].firstUnit ></td>',
    '                                <td><input class=\'form-control\' v-model=freightAreaList[index].firstPrice ></td>',
    '                                <td><input class=\'form-control\' v-model=freightAreaList[index].continueUnit ></td>',
    '                                <td><input class=\'form-control\' v-model=freightAreaList[index].continuePrice ></td>',
    '                            </tr>',
    '                        </tbody>',
    '                    </table>',
    '                    <a class="btn btn-primary btn-sm" @click="addCity">为指定城市设置运费</a>',
    '                </div>',
    '            </div>',
    '            <div class="form-group">',
    '                <div class="col-sm-2 control-label">特定条件免邮:</div>',
    '                <div class="col-sm-6">',
    '                    <table id="trFreight2" class="controls table-striped table-bordered table-condensed" style="width: 100%;">',
    '                        <tr>',
    '                            <th></th>',
    '                            <th>运送到</th>',
    '                            <th>设置包邮件数</th>',
    '                        </tr>',
    '                        <tbody v-for="(item,index) in freightAreaList2">',
    '                        <tr>',
    '                            <th>',
    '                                <a class=\'addBtn\'  @click=\'showFreeArea(index)\'>编辑</a>',
    '                                <a class=\'addBtn\'  @click=\'delFreeArea(index)\'>删除</a>',
    '                            </th>',
    '                            <td>',
    '                                <input class=\'form-control \' readonly="readonly" v-model=freightAreaList2[index].areaNames >',
    '                                <input class=\'form-control \' type="hidden" v-model=freightAreaList2[index].areaIds >',
    '                            </td>',
    '                            <td><input class=\'form-control\' v-model=freightAreaList2[index].firstUnit ></td>',
    '                        </tr>',
    '                        </tbody>',
    '                    </table>',
    '                    <a class="btn btn-primary btn-sm" @click="addFreeArea">选择地址</a>',
    '                </div>',
    '            </div>',
    '            <div class="form-group">',
    '                <div class="col-sm-2 control-label">是否默认模板:</div>',
    '                <div class="col-sm-1">',
    '                    <select class="form-control" v-model="freightTemplate.defTemplate">',
    '                        <option class="form-control" selected="selected" value="0">非默认模板</option>',
    '                        <option class="form-control" value="1">默认模板</option>',
    '                    </select>',
    '                </div>',
    '            </div>',
    '            <div class="form-group">',
    '                <div class="col-sm-2 control-label">是否失效:</div>',
    '                <div class="col-sm-1">',
    '                    <select class="form-control" v-model="freightTemplate.disabled">',
    '                        <option class="form-control" selected="selected" value="0">不失效</option>',
    '                        <option class="form-control" value="1">失效</option>',
    '                    </select>',
    '                </div>',
    '            </div>',
    '            <div class="form-group">',
    '                <div class="col-sm-2 control-label"></div>',
    '                <div class="col-sm-5 control-label">',
    '                    <div class="col-sm-1 control-label">',
    '                        <input type="button" class="btn btn-primary" @click="saveOrUpdate" value="确定"/>',
    '                    </div>',
    '                    <div class="col-sm-1 control-label"></div>',
    '                    <div class="col-sm-1 control-label">',
    '                        <input type="button" class="btn btn-warning" @click="reload" value="返回"/>',
    '                    </div>',
    '                </div>',
    '            </div>',
    '        </form>',
    '    </div>',
    '    <!--运费详细信息-->',
    '    <div id="freightLayer" style="display: none;">',
    '        <table class="table table-striped table-bordered table-condensed">',
    '            <thead>',
    '                <tr>',
    '                    <th style="width:500px">运送到</th>',
    '                    <th style="width:100px">',
    '                        <div v-if="freightTemplate.valuationWay === \'weight\'">首重(Kg)</div>',
    '                        <div v-else>首件(件)</div>',
    '                    </th>',
    '                    <th style="width:100px">首重费用(元)</th>',
    '                    <th style="width:100px">',
    '                        <div v-if="freightTemplate.valuationWay === \'weight\'">续重(Kg)</div>',
    '                        <div v-else>续件(件)</div>',
    '                    </th>',
    '                    <th style="width:100px">',
    '                        <div v-if="freightTemplate.valuationWay === \'weight\'">续件费用(Kg)</div>',
    '                        <div v-else>续件费用(元)</div>',
    '                    </th>',
    '                    <th style="width:100px">是否满件包邮</th>',
    '                </tr>',
    '            </thead>',
    '            <tr>',
    '                <td>未被划分的配送地区自动归于默认运费</td>',
    '                <td>{{freightTemplate.firstUnit}}</td>',
    '                <td>{{freightTemplate.firstPrice}}</td>',
    '                <td>{{freightTemplate.continueUnit}}</td>',
    '                <td>{{freightTemplate.continuePrice}}</td>',
    '                <td></td>',
    '            </tr>',
    '            </thead>',
    '            <tbody v-for="freightArea in freightAreaList">',
    '                <tr>',
    '                    <td>{{freightArea.areaNames}}</td>',
    '                    <td>{{freightArea.firstUnit}}</td>',
    '                    <td>{{freightArea.firstPrice}}</td>',
    '                    <td>{{freightArea.continueUnit}}</td>',
    '                    <td>{{freightArea.continuePrice}}</td>',
    '                    <td v-if="freightArea.rule === \'freeShipping\'">',
    '                        包邮',
    '                    </td>',
    '                    <td v-if="freightArea.rule != \'freeShipping\'">',
    '                    </td>',
    '                </tr>',
    '            </tbody>',
    '        </table>',
    '    </div>',
    '    <el-dialog',
    '            title="提示"',
    '            :visible.sync="freightDialog"',
    '            width="30%"',
    '            center>',
    '        <el-tree :data="allRegions" ref="regionRef"  check-strictly show-checkbox @node-click="handleNodeClick"></el-tree>',
    '        <span slot="footer" class="dialog-footer">',
    '            <el-button @click="freightDialog = false">取 消</el-button>',
    '            <el-button type="primary" @click="enterCityChoice">确 定</el-button>',
    '        </span>',
    '    </el-dialog>',
    '</div>',
    '</div>',
].join("");

Vue.component('zy-freight-template', {
    template: htmlCodes,
    props: {
        freightPropId:null,
    },
    data:function() {
        return {
            showList: true,
            title: null,
            freightTemplateList:[],
            freightTemplate: {},
            freightAreaList:[],
            freightAreaList2:[],
            allRegions:[],
            mark: '',
            sum : "",
            sum2 : "",
            q:{
                templateName: ''
            },
            freightDialog:false,
            page: {
                current: 1, // 当前页
                size: 10, // 分页数
                total: 0, // 总条数
            },
            // freightIdRadio:null,

            }
    },
    mounted:function(){
        this.freightTemplateSearch();
    },
    methods: {
        returnTemplateId:function(templateId){
            console.info(templateId);
            this.$emit('zy-freight-template-radio',templateId);
        },
        query: function () {
            this.reload();
        },
        add: function () {
            this.showList = false;
            this.title = "新增";
            this.freightTemplate = {
                'freeShipping': '0',
                'valuationWay': 'unit',
                'disabled': '0',
                'defTemplate': '0',
                'templateType': 'sku',
                'providerType': 'shop'
            };
            this.freightAreaList = [];
            this.freightAreaList2 = [];
        },

        //添加城市
        addCity: function () {
            this.freightAreaList.push({'areaNames': '', 'areaIds': '', 'rule': 'valuationWay'});
            console.info(this.freightAreaList)
        },
        showCity: function (index) {
            this.freightDialog = true;
            this.mark = 'valuationWay';
            this.sum = index;
        },
        delCity: function (index) {
            this.freightAreaList.splice(index, 1);
        },
        //设置免邮地区
        addFreeArea: function () {
            this.freightAreaList2.push({
                'areaNames': '',
                'areaIds': '',
                'rule': 'freeShipping',
                'firstPrice': '0',
                'continueUnit': '0',
                'continuePrice': '0'
            });
            console.info(this.freightAreaList2)
        },
        showFreeArea: function (index) {
            this.freightDialog = true;
            this.mark = 'freeShipping';
            this.sum = index;
        },
        delFreeArea: function (index) {
            this.freightAreaList2.splice(index, 1);
        },
        update: function (templateId) {
            this.showList = false;
            this.title = "修改";
            this.getInfo(templateId, true)
        },
        saveOrUpdate: function (event) {
            this.freightTemplate.freightAreaList = this.freightAreaList;
            this.freightTemplate.freightAreaList = this.freightTemplate.freightAreaList.concat(this.freightAreaList2)
            if (this.validator()) {
                return;
            }
            var url = this.freightTemplate.templateId == null ? "freightages/freighttemplate/save" : "freightages/freighttemplate/update";
            var self = this;
            $.ajax({
                type: "POST",
                url: baseURL + url,
                contentType: "application/json",
                data: JSON.stringify(self.freightTemplate),
                success: function (r) {
                    if (r.code === 0) {
                        alert('操作成功', function (index) {
                            self.reload();
                        });
                    } else {
                        alert(r.msg);
                    }
                }
            });
        },
        del: function (templateId) {
            var nos = [];
            nos.push(templateId)
            var self = this;
            this.$confirm('确定要删除选中的记录？', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(function(){
                $.ajax({
                    type: "POST",
                    url: baseURL + "freightages/freighttemplate/delete",
                    contentType: "application/json",
                    data: JSON.stringify(nos),
                    success: function(r){
                        if(r.code == 0){
                            self.freightTemplateSearch();
                            this.$message({
                                type: 'success',
                                message: '删除成功!'
                            });
                        }else{
                            alert(r.msg);
                        }
                    }
                });
            }).catch(function(){
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });
        },
        getInfo: function (templateId, boolean) {
            var self = this;
            $.get(baseURL + "freightages/freighttemplate/info/" + templateId, function (r) {
                self.freightTemplate = r.freightTemplate;
                self.freightAreaList = r.freightAreaList;
                //取出免邮集合
                if (boolean) {
                    if (self.freightAreaList != null && self.freightAreaList.length > 0) {
                        for (var i = 0; i < self.freightAreaList.length; i++) {
                            if (self.freightAreaList[i].rule == 'freeShipping') {
                                self.freightAreaList2.push(self.freightAreaList[i]);
                                self.freightAreaList.splice(i, 1);
                                i--;
                            }
                        }
                    }
                }
            });
        },
        reset: function () {
            this.q.templateName = '';
        },
        reload: function (event) {
            this.showList = true;
            this.freightTemplate = {};
            this.freightAreaList = [];
            this.freightAreaList2 = [];
            var page = $("#jqGrid").jqGrid('getGridParam', 'page');
            $("#jqGrid").jqGrid('setGridParam', {
                page: page,
                postData: {
                    'templateName': this.q.templateName,
                }
            }).trigger("reloadGrid");
        },
        validator: function () {
            console.log(this.freightTemplate);
            // console.log(this.freightAreaList);
            // console.log(this.freightAreaList2);
            if (isBlank(this.freightTemplate.templateName)) {
                alert("运费模板名不能为空!");
                return true;
            }
            //运费模板数字校验
            var check = /^[+]{0,1}(\d+)$|^[+]{0,1}(\d+\.\d+)$/;
            if (!(check.test(this.freightTemplate.firstUnit) && check.test(this.freightTemplate.firstPrice) && check.test(this.freightTemplate.continueUnit) && check.test(this.freightTemplate.continuePrice))) {
                alert("模板参数只能是正数!")
                return true;
            }
            //校验子表数据
            var freightAreaList = this.freightTemplate.freightAreaList;
            for (var i = 0; i < freightAreaList.length; i++) {
                if (!(check.test(freightAreaList[i].firstUnit) && check.test(freightAreaList[i].firstPrice) && check.test(freightAreaList[i].continueUnit) && check.test(freightAreaList[i].continuePrice))) {
                    alert("模板参数只能是正数!")
                    return true;
                }
                if (isBlank(freightAreaList[i].areaNames)) {
                    alert("地区不能为空!")
                    return true;
                }
            }
        },
        handleClose: function () {

        },
        handleNodeClick: function () {


        },
        enterCityChoice: function () {
            var checkedNodes = this.$refs.regionRef.getCheckedNodes();
            var ids = [];
            var names = []
            for (var checkedNode of checkedNodes) {
                ids.push(checkedNode.value);
                names.push(checkedNode.label);
            }
            if (this.mark == 'valuationWay') {
                this.freightAreaList[this.sum].rule = 'valuationWay'
                this.freightAreaList[this.sum].areaNames = names.join(",")
                this.freightAreaList[this.sum].areaIds = ids.join(",")
            } else {
                this.freightAreaList[this.sum].rule = 'freeShipping'
                this.freightAreaList2[this.sum].areaNames = names.join(",")
                this.freightAreaList2[this.sum].areaIds = ids.join(",")
            }
            this.freightDialog = false;
        },
        handleSizeChange: function (val) {
            this.page.size = val;
            this.freightTemplateSearch();
        },

        handleCurrentChange: function (val) {
            this.page.current = val;
            this.freightTemplateSearch();
        },
        freightTemplateSearch: function () {
            var paramData = {};
            paramData.marketable = this.q.marketable;
            paramData.current = this.page.current;
            paramData.size = this.page.size;
            paramData.total = this.page.total;
            var self = this;
            $.ajax({
                type: "POST",
                url: baseURL + "freightages/freighttemplate/newList",
                contentType: "application/json",
                data: JSON.stringify(paramData),
                success: function (r) {
                    if (r.code == 0) {
                        self.page.current = r.page.current;
                        self.page.size = r.page.size;
                        self.page.total = r.page.total;
                        self.freightTemplateList = r.page.records;
                        self.allRegions = r.allRegions;
                    } else {
                        alert(r.msg);
                    }
                }
            })
        }
    }
})



